import React, { Component } from 'react'
import { Empty, Card, PageHeader, Layout, Image } from 'antd'
import './index.css'
import { MdPreviewer } from "react-markdown-previewer";
const { Content } = Layout
export default class Detail extends Component {
    state = { isExist: true, title: '', author: '', content: '# 这是h1标签\n ## hello word', pic: '', createtime: '2021/10/25', brief: '' }
    componentDidMount() {
        const { title, pic, brief, author } = this.props.location.state || {}
        if (title == undefined){this.setState({isExist:false})}
        else {this.setState({ title, pic, brief, author })}
    }
    render() {
        const { isExist, title, content, pic, createtime, brief } = this.state
        return (
            <div>
                <Content style={{ height: '550px' }}>
                    {
                        isExist ?
                            <Card>
                                <Card
                                    style={{ width: '100%', marginTop: 16 }}
                                >
                                    <Image
                                        width={'100%'}
                                        height={200}
                                        src={pic}
                                        fallback=""
                                    />
                                    <PageHeader
                                        title={title}
                                        className="site-page-header"
                                        subTitle={brief}
                                        avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
                                    >
                                    </PageHeader>
                                    <MdPreviewer md={content}></MdPreviewer>
                                </Card>
                            </Card>
                            :
                            <Empty description="文章数据为空"/>

                    }
                </Content>
            </div>
        )
    }
}
